/*首页 大轮播图*/
.banner_container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    width: 100%;
    height: auto;
}

.banner-swiper {
    width: 100%;
    height: 6rem;
}

.banner-swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* 防止放大后的图片溢出容器 */
}

.banner-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}

@keyframes mymove {

    /* 开始状态（0%） */
    0% {
        transform: scale(1);
        /* 初始不缩放（scale=1） */
    }

    /* 结束状态（100%） */
    100% {
        transform: scale(1.1);
        /* 放大到 1.1 倍 */
    }
}

/* 2. 应用动画到元素 */
.banner-swiper .swiper_img {
    animation: mymove 10s infinite alternate;
    /* 
    animation: 动画名 时长 循环次数 方向; 
    infinite: 无限循环；alternate: 来回播放（放大→缩小→放大…）
  */
}

.banner-swiper .swiper-pagination {
    position: absolute;
    bottom: 0.2rem;
    --swiper-pagination-color: red;
}

.banner_container .banner-swiper .banner-text {
    width: 70%;
    position: absolute;
    box-sizing: border-box;
    opacity: 0;
    z-index: 100000;
    top: 30%;
    left: 10%;
}


.banner-swiper .banner-text {
    opacity: 0;
    /* 完全透明（隐藏） */
    transform: translateX(-18px);
    /* 向左偏移18px */
    transition: opacity 1.5s ease-in-out 0.3s, transform 1.5s ease-in-out 0.3s;
    /* 声明过渡效果：
     - opacity 和 transform 属性变化时触发过渡
     - 过渡时长 1.5秒
     - 延迟0.15秒
     - 缓动函数 ease-in-out（先慢后快再慢） */
}

.banner-swiper .swiper-slide-active .banner-text {
    opacity: 1;
    /* 完全可见 */
    transform: translateX(0);
    /* 回到原始位置 */
}

.banner-swiper .banner-text .area {
    position: relative;
    /* 让子元素在容器内垂直排列，可根据需求调整 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 水平居中 */
}

.banner-swiper .banner-text .area img {
    display: block;
}


.banner_container .banner-swiper .swiper-slide .area .banner-link {
    width: 2.65rem;
    box-shadow: 0 0 0.1rem 0 rgba(221, 44, 23, 0.51);
    transition: all 0.3s;
    background: linear-gradient(90deg, #ec3a14 0%, #ff7108 100%);
    display: table;
    text-align: center;
    font-size: 0.2rem;
    padding: 0 0.4rem;
    height: 0.52rem;
    border-radius: 0.26rem;
    line-height: 0.52rem;
    color: #fff;
    margin-top: 0.65rem;
}